<html>
  <head>
    <title>View2D Test</title>
    <script src="View2D.js"></script>
    <script type="text/javascript">
var viewA, viewB, graphA;

function init() {
    viewA = new View2DTest("view2d");
    viewA.viewData.location = [-.2, -.15];
    viewA.viewData.scale = [2, 2];
    viewA.draw();

    viewB = new View2DTest("view2d_2");
    viewB.viewData.location = [-.2, -.15];
    viewB.viewData.scale = [.5, .5];
    viewB.draw();

    var pts_0 = [ [0, 0], [1, 1.3], [2, 2.2], [3, 1.3], [4, 4],
                  [5,3], [6, 4], [7, 4.4]];
    pts_0 = pts_0.map(function(item, index, array) {
                        return vec2_mulN(item, .1);
                      });
    var pts_1 = pts_0.map(function(item, index, array) {
                        return [item[0], .2 + item[1] * (1 - item[0] / 2)];
                      });
    var pts_2 = pts_0.map(function(item, index, array) {
                        return [item[0], 1 - item[1]];
                      });
    var pts_3 = pts_0.map(function(item, index, array) {
                        return [item[0], item[1] - .1, item[1] + .1];
                      });
    graphA = new Graph2D("graph2d");
if (1) {
    graphA.addPlot(pts_0, new Graph2D_LinePlotStyle(2));
    graphA.addPlot(pts_1);
    graphA.addPlot(pts_2, new Graph2D_LinePlotStyle(null, [1,0,0]));
    graphA.addPlot(pts_0, new Graph2D_PointPlotStyle(5, [.8, .5, 0]));
    graphA.addPlot(pts_3, new Graph2D_ErrorBarPlotStyle(1, [0, 1, 0]));
} else {
    graphA.addPlot([[1248617856.000000,1.398600],[1248960469.000000,1.241700],[1249396047.000000,1.214300],[1249488792.000000,1.211600],[1249564554.000000,1.239500],[1249732514.000000,1.239200],[1249819044.000000,1.236300],[1249910746.000000,1.234200],[1249996733.000000,1.236000],[1250083258.000000,1.252600],[1250255237.000000,1.260400],[1250341501.000000,1.253500],[1250427966.000000,1.262600],[1250514329.000000,1.261600],[1250600211.000000,1.249100],[1250686801.000000,1.250700],[1250773065.000000,1.255400],[1250859519.000000,1.246300],[1250946756.000000,1.245900],[1251032239.000000,1.238200],[1251118837.000000,1.238000],[1251205034.000000,1.241900],[1251292148.000000,1.236500],[1251379354.000000,1.230200],[1251466226.000000,1.228700],[1251552218.000000,1.233600],[1251638633.000000,1.222400],[1251725230.000000,1.222100],[1251811608.000000,1.239100],[1251898565.000000,1.230200],[1251984695.000000,1.241700],[1252070572.000000,1.205800],[1252157268.000000,1.211100],[1252243914.000000,1.210300],[1252330714.000000,1.206000],[1252416809.000000,1.210800],[1252590190.000000,1.216800],[1252675459.000000,1.214400],[1252762486.000000,1.220700],[1252886652.000000,1.221700],[1252935938.000000,1.215200],[1253021864.000000,1.213800],[1253108596.000000,1.213800],[1253194864.000000,1.231900],[1253281344.000000,1.232000],[1253366664.000000,1.238400],[1253453169.000000,1.232500],[1253539839.000000,1.230100],[1253627357.000000,1.232600],[1253713381.000000,1.235700],[1253799754.000000,1.232400],[1253886021.000000,1.241900],[1253972269.000000,1.229700],[1254058753.000000,1.229100],[1254145361.000000,1.284000],[1254231276.000000,1.295200],[1254317581.000000,1.299800],[1254405166.000000,1.340600],[1254490117.000000,1.305300],[1254576631.000000,1.304100],[1254662979.000000,1.303700],[1254749498.000000,1.306800],[1254835808.000000,1.306200],[1254922190.000000,1.270100],[1255008713.000000,1.270900],[1255094924.000000,1.267300],[1255181629.000000,1.265100],[1255267916.000000,1.283300],[1255354566.000000,1.285500],[1255440921.000000,1.287100],[1255526237.000000,1.269800],[1255613420.000000,1.318400],[1255700706.000000,1.301600],[1255786760.000000,1.305000],[1255873293.000000,1.305000],[1255959875.000000,1.438800],[1256046280.000000,1.437400],[1256132389.000000,1.439100],[1256218592.000000,1.461200],[1256304662.000000,1.464100],[1256391812.000000,1.462300],[1256478151.000000,1.469600],[1256564495.000000,1.472300],[1256823554.000000,1.474000],[1256909311.000000,1.477200],[1256996077.000000,1.459000],[1257082516.000000,1.426100],[1257258543.000000,1.433700],[1257344527.000000,1.452600],[1257431075.000000,1.440700],[1257516720.000000,1.443300],[1257602894.000000,1.503300],[1257863543.000000,1.550200],[1257948938.000000,1.532500],[1258035827.000000,1.534900],[1258122304.000000,1.535600],[1258207973.000000,1.546700],[1258294248.000000,1.534700],[1258382337.000000,1.544000],[1258551986.000000,1.509100],[1258640333.000000,1.554300],[1258728912.000000,1.541100],[1258815149.000000,1.602700],[1258901720.000000,1.685900]]);
graphA.xAxis.format = graphA.xAxis.formats.day;
}
    graphA.draw();
}
    </script>
  </head>
  <body onload="init()" bgcolor="#AAAAAA">
    <canvas id="graph2d" width="600" height="400"></canvas>
    <br>
    <table>
      <tr>
        <td><canvas id="view2d" width="300" height="200"></canvas></td>
        <td><canvas id="view2d_2" width="200" height="350"></canvas></td>
      </tr>
    </table>
    Shift-Left Mouse: Pan<br>
    Alt/Meta-Left Mouse: Zoom<br>
    Wheel: Zoom (<i>Shift Slows</i>)<br>
  </body>
</html>
